<template>
	<view class="inner_page">
		<home-barTittle :title="title" :showBack="true"></home-barTittle>
		<view class="tuan-detail-content-tab bd-bottom">
			<sub-tab :tabs="tabs" :selectIndex="signUpType" @change="changeIndex"></sub-tab>
		</view>
		<!-- 个人报名 -->
		<view v-if="signUpType == 0" class="pd16_15">
			<form @submit="signUpByPerson">
				<view v-for="(person, index) in personList" :key="index" class="form-item">
					<view class="form-header">
						<view class="form-title">孩子信息 {{ index + 1 }}</view>
						<view v-if="index > 0" class="delete-btn" @click="deletePerson(index)">
							<text class="delete-icon">×</text>
						</view>
					</view>
					<!-- 姓名 -->
					<view class="form-row">
						<text class="label required">姓名：</text>
						<view class="u-flex-col">
							<input class="input" type="text" v-model="person.childName" 
								@blur="validateField('childName', index)" placeholder="请输入姓名" />
							<text class="error-msg" v-if="errors[index].childName">{{ errors[index].childName }}</text>
						</view>
					</view>

					<!-- 性别 -->
					<view class="form-row ">
					  <text class="label">性别：</text>
					  <radio-group class="radio-group" v-model="person.childSex">
						<label class="radio-label">
						  <radio value="男" class="small-radio" />男
						</label>
						<label class="radio-label">
						  <radio value="女" class="small-radio" />女
						</label>
					  </radio-group>
					</view>

					<!-- 出生年月 -->
					<view class="form-row">
						<text class="label">生日：</text>
						<picker 
							mode="date" 
							fields="day"
							:value="person.childBirthday"
							@change="(e) => dateChange(e, index)"
							start="1900-01-01"
							:end="getCurrentDate()"
						>
							<view class="picker">{{ person.childBirthday || '请选择孩子生日' }}</view>
					 <!-- <picker mode="date" fields="day" v-model="person.childrenBirthday">
						<view class="picker">{{ person.childrenBirthday || '请选择出生年月' }}</view> -->
						</picker>
					</view>

					<!-- 家庭住址 -->
					<view class="form-row">
					  <text class="label">家庭住址：</text>
					  <input class="input" type="text" v-model="person.childAddress" placeholder="请输入家庭住址" />
					</view>

					<!-- 联系电话 -->
					<view class="form-row">
					  <text class="label required">联系电话：</text>
					  <view class="u-flex-col">
						  <input class="input" type="number" v-model="person.childTel"
								@blur="validateField('childTel', index)" placeholder="请输入联系电话" />
						  <text class="error-msg" v-if="errors[index].childTel">{{ errors[index].childTel }}</text>
					  </view>
					  
					</view>

					<view class="divider"></view>
				</view>

				<view class="button-group">
					<button class="add-btn" type="default" @click="addPerson">
					  <text class="icon">+</text> 继续添加
					</button>
					<button class="submit-btn" form-type="submit">提交</button>
				</view>
			</form>
		</view>
		<!-- 团队报名 -->
		<view v-if="signUpType == 1" class="pd16_15">
			<form @submit="signUpByGroup">
				<view class="form-item">
					<view class="form-header">
						<view class="form-title">团队信息</view>
						
					</view>
					<!-- 人数 -->
					<view class="form-row">
					  <text class="label required">人数：</text>
					  <input class="input" type="text" v-model="group.group_person_num" placeholder="请输入团队人数" />
					</view>
					<!-- 详情 -->
					<view class="form-row">
					  <text class="label">详情：</text>
					  <text class="label" style="width:80rpx;" >男生：</text>
					  <input class="input" type="text" v-model="group.group_male_num" placeholder="男生人数" />
					  <text class="label" style="width:80rpx;">女生：</text>
					  <input class="input" type="text" v-model="group.group_female_num" placeholder="女生人数" />
					</view>
			
					<!-- 报名单位 -->
					<view class="form-row">
					  <text class="label">报名单位：</text>
					  <input class="input" type="number" v-model="group.group_name" placeholder="请输入报名单位" />
					</view>
					
					<!-- 单位地址 -->
					<view class="form-row">
					  <text class="label">单位地址：</text>
					  <input class="input" type="number" v-model="group.group_address" placeholder="请输入单位地址" />
					</view>
			
					<!-- 联系电话 -->
					<view class="form-row">
					  <text class="label required">联系电话：</text>
					  <input class="input" type="number" v-model="group.group_tel" placeholder="请输入联系电话" />
					</view>
			
					<view class="divider"></view>
					
				
					<view class="button-group">
						<button class="submit-btn" form-type="submit">提交</button>
					</view>
				</view>
			</form>
		</view>
		
		
		
		<dialog-login v-if="showLogin" @loginYes="loginYes" @closed="showLogin = false"></dialog-login>
		
	</view>
</template>

<script>

import infoVue from './info.vue';
// import mapTencent from '@/components/map/map-tencent.vue';
// import mpHtml from 'mp-html/dist/components/mp-html/mp-html'
// import zaudio from 'uniapp-zaudio/zaudio'

export default {
	
	data(){
		return {
			title:"我要报名",
			isLogin:false,
			showLogin:false,
			
			signUpType:0,// 0-个人报名，1-团队报名
			tabs:['个人报名','团队报名'],
			personList: [{
				childName: '',
				childSex: '',
				childBirthday: this.formatDate(new Date()),
				childAddress: '',
				childTel: ''
			}],
			errors: [{}], // 存储验证错误信息
			group:{
				group_name:'',
				group_person_num:'',
				group_male_num:'',
				group_female_num:'',
				group_address:'',
				group_tel:'',
				group_info:''
			},
			nextStep:'',
			datasa:[],
			dataconfig:[],
			id:'',
			mid:0,
			info:[],
			userPaidStatus:'',
			dda:'',
			price:'',
			banners:[],
			isplaytext:'已经购买',
			audioAction: {
				method: 'pause'
			}
		}
	},
	computed: {
		
	},
	onLoad(option){
		// this.dda=uni.createVideoContext('myVideo')
		if(option.activityId){
			this.id=option.activityId
		}
	},
	onShow() {
		// if(uni.getStorageSync("userinfo").token){
		// 	this.isLogin = true
		// 	this.showLogin = false
		// }
		
		this.getInfo(this.id);
	},
	onHide() {
		this.dda.pause()
	},
	onShareAppMessage(e){
		
	},
	onShareTimeline(e){
		
	},
	methods:{
		formatDate(date) {
			const year = date.getFullYear()
			const month = String(date.getMonth() + 1).padStart(2, '0')
			const day = String(date.getDate()).padStart(2, '0')
			return `${year}-${month}-${day}`
		},
		dateChange(e, index) {
			this.$set(this.personList[index], 'childrenBirthday', e.detail.value)
		},
		getCurrentDate() {
			return this.formatDate(new Date())
		},
		addPerson() {
			this.personList.push({
			name: '',
			gender: '',
			birthday: '',
			address: '',
			phone: ''
			})
		},
		deletePerson(index) {
		  uni.showModal({
			title: '提示',
			content: '确定要删除这条人员信息吗？',
			success: (res) => {
			  if (res.confirm) {
				this.personList.splice(index, 1)
			  }
			}
		  })
		},
		
		
		
		
		validateField(field, index) {
			
			console.log("validateField")
			console.log(field)
			console.log(index)
			if (field === 'childName') {
				if (!this.personList[index].childName) {
					this.$set(this.errors[index], 'childName', '姓名不能为空')
				} else {
					this.$delete(this.errors[index], 'childName')
				}
			}
			console.log(this.errors[index])
			if (field === 'childTel') {
				if (!this.personList[index].childTel) {
					this.$set(this.errors[index], 'childTel', '联系电话不能为空')
				} else if (!/^1[3-9]\d{9}$/.test(this.personList[index].childTel)) {
					this.$set(this.errors[index], 'childTel', '请输入有效的手机号码')
				} else {
					this.$delete(this.errors[index], 'childTel')
				}
			}
		},
		isEmpty(obj) {
		  for (let key in obj) {
		    if (obj.hasOwnProperty(key)) return false;
		  }
		  return true;
		},
		checkChildrenParam(){
			var valid = true
			this.personList.forEach(child =>{
				if( this.isEmpty(child.childName) || this.isEmpty(child.childTel)){
					valid = false
				}
			})
			return valid;
		},
		signUpByPerson() {
			if(this.checkChildrenParam() ==false){
				uni.showToast({
					title: '请检查人员信息',
					icon: 'error'
				})
				return
			}
			uni.showLoading();
			var data = {
				activityId : this.id,
				signUpType : this.signUpType,
				children : this.personList
			}
			console.log('提交的数据：', this.personList)
			this.signUp(data)
		},
		checkGroupParam(){
			var valid = true
			if( this.isEmpty(this.group.group_person_num) || this.isEmpty(this.group.group_tel)){
				valid = false
			}
			return valid;
		},
		signUpByGroup(){
			if(this.checkGroupParam() ==false){
				uni.showToast({
					title: '请检查团队信息',
					icon: 'error'
				})
				return
			}
			uni.showLoading();
			var data = {
				activityId : this.id,
				signUpType : this.signUpType,
				group : this.group
			}
			console.log('提交的数据：',  this.group)
			this.signUp(data)
		},
		
		
		
		signUp(data) {
			uni.request({
				url: this.configs.webUrl+'/miniapp/activitySignUp' ,
				data: data,
				method:'POST',
				success: (resp) => {
					uni.hideLoading();
					console.log("resp")
					console.log(resp)
					if(resp.data.code==200){
						uni.navigateBack({
							success() {
								uni.$emit("signUpSuccess",{msg:'报名成功！'})
							}	
						})
					}else{
						uni.showToast({
							title: resp.data.msg,
							icon: 'none',
							duration: 2000
						});
					}
				},
				fail: (resp, code) => {
					uni.hideLoading();
					uni.showToast({
						title: resp.data.msg,
						icon: 'none',
						duration: 2000
					});
				}
			});
		},
		getInfo(id) {
			console.log("getInfo")
			uni.showLoading({
				title: '加载中'
			});
			// let data = {};
			if(uni.getStorageSync("userinfo").token){
				// data.token=uni.getStorageSync("userinfo").token
				this.isLogin = true
			}
			uni.request({
				url: this.configs.webUrl+'/miniapp/activity/'+id ,
				// data: data,
				success: data => {
						uni.hideLoading();
						this.info=[];
						this.info=data.data.data
						// console.log('this.info')
						// console.log(this.info)
					
						
						uni.setNavigationBarTitle({
							title: this.info.activityName
						});
				},
				fail: (data, code) => {
					uni.hideLoading();
				}
			});
		},
		
		/**
		 * 判断景点是否免费
		 * @param {boolean} userPaidStatus - 是否付费过任意景点（关键全局状态）
		 * @param {boolean} areaChargeStatus - 景区状态：'收费'/'免费'
		 * @param {boolean} videoChargeStatus - 景点状态：'收费'/'免费'
		 * @returns {boolean} - true=免费 / false=收费
		 */
		isVideoFree(userPaidStatus, areaChargeStatus, videoChargeStatus) {
			console.log(userPaidStatus, areaChargeStatus, videoChargeStatus)
		  // 规则1：付费过任意景点 → 所有景点免费
		  if (userPaidStatus) return true;
		  
		  // 规则2：景区整体免费 → 所有景点免费
		  if (areaChargeStatus === false) return true;
		  
		  // 规则3：以上均不满足时，检查景点自身状态
		  return videoChargeStatus === false;
		},
		buys(value){
			let dataa = {};
			this.info.priced=value.price
			this.info.vippriced=value.vipprice
			this.info.pricedbuy=this.info.price
			if(uni.getStorageSync("userinfo").apiToken){
				if(this.info.isvip>1){
					this.info.pricedbuy=value.vipprice
				}
			}
			console.log(value)
			
			uni.setStorage({//缓存配置信息
				key: 'buydata',  
				data: this.info
			})
			uni.navigateTo({
				url:'/sub_pages/scenicArea/buy?id='+this.id+'&mid='+value.id
			})	
		},
		timeupdate(event){
				let _this=this;
				let currentTime = event.detail.currentTime 
				if(currentTime>this.info.mrseek && this.info.isplay==0){
					 //dda.exitFullScreen()
					 this.dda.seek(this.info.mrseek)
					 this.dda.pause()
					 this.dda.stop()
					 uni.showModal({
						title: '温馨提示',
						content: '没权限观看当前视频',
						showCancel: false,
						confirmText: "确定",
						success: function (res) {
							if (res.confirm) {
								
							} else if (res.cancel) {
								
							}
						}
					 });
				}
		},
		
		// 判断当前用户是否已经购买了当前景区的视频权限（购买任一视频权限，均开放当前景区内的所有视频权限）
		checkPaid(scenicId){
			var userinfo = uni.getStorageSync("userinfo");
			uni.request({
				url: this.configs.webUrl+'/api/scenicArea/checkPaid',
				data: {
					userId: userinfo.id,
					scenicAreaId: scenicId
				},
				method:'POST',
				
				success: data => {
					console.log("checkPaid");
					this.userPaidStatus = data.data.data;
					console.log(this.userPaidStatus);
					
					// this.checkShowVideo();
				},
				fail: (data, code) => {
				}
			});
		},
		checkShowVideo(){
			// 1.景区免费
			// 2.景区收费&景点免费
			// 3.景区收费&已付费
			this.showVideo = true;
		},
		
		contactAct(){
			if(this.isLogin == false){
				this.showLogin = true;
				this.nextStep = 'contact';
			}else{
				uni.navigateTo({
					url:'/pages/client/vipcard/adviser'
				})
			}
		},
		vipcard(){
			uni.navigateTo({
				url:'/pages/client/vipcard/index'
			})
		},
		detail(id,mid){
			uni.navigateTo({
				url:'/sub_pages/scenicArea/detail?id='+id+'&mid='+mid
			})
			
			// console.log("收费："+this.info.chargeStatus)
			// if(this.info.chargeStatus & !this.userPaidStatus){
			// 	uni.navigateTo({
			// 		url:'/sub_pages/scenicArea/buy?id='+id+'&mid='+mid
			// 	})
			// }else{
			// 	uni.navigateTo({
			// 		url:'/sub_pages/scenicArea/detail?id='+id+'&mid='+mid
			// 	})
			// }
			
		},
		buyAct(){
			if(this.price*1==0){
				uni.showToast({ title: '免费视频不需要购买',icon:"none" });
						return false; 
					}
					if(this.isLogin == false){
						this.showLogin = true;
						this.nextStep = 'buy';
					}else{
						uni.setStorage({//缓存配置信息
							key: 'buydata',  
							data: this.info
						})
						uni.navigateTo({
							url:'/sub_pages/scenicArea/buy?id='+this.id
						})
					}
				},
			loginYes(){
				if(this.nextStep == 'buy'){
					uni.navigateTo({
						url:'/sub_pages/scenicArea/buy'
					})
				}else{
					uni.navigateTo({
						url:'/pages/client/vipcard/adviser'
					})
				}
			},
			changeIndex(index){
				this.signUpType = index;
			}
		}
	}
</script>

<style>

	/* 富文本自动换行 */
	.mphtml{
		white-space: pre-wrap; /* CSS3 */
		word-wrap: break-word; /* Internet Explorer 5.5+ */
		padding-bottom: 200px;
	}
	/* 底部悬浮框 */
	.activity-info-bottom{
		width: 100%;
		background: #fdf6e3;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0;
		margin-top: 20rpx;
	}
	/* 报名按钮 */
	.button-signin{
		color: #FFFFFF;
		font-size: 34rpx;
		width: 470rpx;
		height: 100rpx;
		background: linear-gradient(-90deg, rgba(75, 196, 93, 1), rgba(188, 226, 158, 1));
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
		border-radius: 50rpx;
		line-height: 100rpx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 100rpx;
	}

	.required::before {
		content: '*';
		color: #f56c6c;
		margin-right: 4rpx;
	}
	.error-msg {
		color: #f56c6c;
		font-size: 24rpx;
		margin-top: 10rpx;
		/* margin-left: 160rpx; */
	}
	.picker {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 24rpx;
		border: 1rpx solid #e1e5eb;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: #666;
	}
	.form-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.delete-btn {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		background-color: #ff4d4f;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all 0.3s;
	}
	.delete-btn:hover {
		transform: scale(1.1);
		background-color: #ff7875;
	}
	.delete-icon {
		color: white;
		font-size: 36rpx;
		line-height: 1;
		margin-bottom: 4rpx;
	}
	.form-item {
		margin-bottom: 30rpx;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	  transition: all 0.3s ease;
	}
	.form-item:hover {
		box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.12);
	}
	.form-title {
		font-size: 32rpx;
		font-weight: 600;
		margin-bottom: 30rpx;
		color: #333;
		padding-bottom: 10rpx;
		border-bottom: 1rpx solid #eee;
	}
	.form-row {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
	}
	.label {
		width: 160rpx;
		font-size: 28rpx;
		color: #666;
	}
	.input {
		flex: 1;
		height: 80rpx;
		padding: 0 24rpx;
		border: 1rpx solid #e1e5eb;
		border-radius: 10rpx;
		font-size: 28rpx;
		transition: border 0.3s;
	}
	.input:focus {
		border-color: #409eff;
	}
	.radio-group {
		display: flex;
		flex: 1;
		gap: 40rpx;
	}
	.radio-label {
		display: flex;
		align-items: center;
		font-size: 28rpx;
	}
	.small-radio {
		transform: scale(0.7);
		margin-right: 10rpx;
	}
	.picker {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 24rpx;
		border: 1rpx solid #e1e5eb;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: #666;
	}
	.divider {
		height: 1rpx;
		background: linear-gradient(to right, transparent, #e1e5eb, transparent);
		margin: 30rpx 0;
	}
	.button-group {
		display: flex;
		justify-content: flex-end;
		gap: 20rpx;
		margin-top: 40rpx;
	}
	.add-btn {
	  background-color: #f0f9ff;
	  color: #409eff;
	  border: 1rpx solid #d9ecff;
	  font-size: 28rpx;
	  height: 80rpx;
	  line-height: 80rpx;
	  padding: 0 30rpx;
	  border-radius: 40rpx;
	  transition: all 0.3s;
	}
	.add-btn:hover {
	  background-color: #e1f3ff;
	}
	.add-btn .icon {
	  font-weight: bold;
	  margin-right: 8rpx;
	}
	.submit-btn {
	  background: linear-gradient(135deg, #409eff, #337ecc);
	  color: #fff;
	  font-size: 28rpx;
	  height: 80rpx;
	  line-height: 80rpx;
	  padding: 0 40rpx;
	  border-radius: 40rpx;
	  box-shadow: 0 4rpx 12rpx rgba(64, 158, 255, 0.3);
	  transition: all 0.3s;
	}
	.submit-btn:hover {
	  opacity: 0.9;
	  box-shadow: 0 6rpx 16rpx rgba(64, 158, 255, 0.4);
	}
</style>